<template>
  <nav class="bottom-nav">
    <ul>
      <li
        v-for="item in navItems"
        :key="item.name"
        :class="{ active: $route.path === item.path }"
        @click="go(item.path)"
      >
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "BottomNav",
  props: {
    navItems: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    go(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  border-top: 1px solid #ddd;
}
.bottom-nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bottom-nav li {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  cursor: pointer;
}
.bottom-nav li.active {
  color: #42b983;
  font-weight: bold;
}
.bottom-nav i {
  display: block;
  font-size: 18px;
}
</style>
